import React, { Component } from 'react'
import { messages } from "share/common";
import { Form, Icon, Modal, Input, message } from "antd";
import confirmPaymentService from "../confirm-payment.service";

@Form.create()
class CancelModal extends Component {

  state = {
    cancelLoading: false
  };

  componentWillReceiveProps = nextProps => {
    if (nextProps.visible === this.props.visible) {
      return -1;
    }
    if (!nextProps.visible) {
      this.props.form.resetFields();
    }
  };

  handleCancel = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { params, key, onCancel, onOk } = this.props;
        params.comment = values.comment;
        this.setState({ cancelLoading: true });
        confirmPaymentService.cancelPayment(key, params, false).then(() => {
          message.success(messages('common.operate.success')/*操作成功*/);
          this.setState({ cancelLoading: false }, onOk);
        }).catch(e => {
          message.error(e.response.data.message);
          this.setState({ cancelLoading: false }, onCancel)
        });
      }
    })
  };

  render() {
    const { cancelLoading } = this.state;
    const { visible, onCancel } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        onOk={this.handleCancel}
        onCancel={onCancel}
        okText={messages('common.ok')/*确定*/}
        cancelText={messages('common.cancel')/*取消*/}
        confirmLoading={cancelLoading}
        visible={visible}
        closable={false}
      >
        <div>
          <Icon type="exclamation-circle" style={{ color: "#F7C243", fontSize: "30px", float: "left" }}/>
          <span style={{
            lineHeight: "30px",
            fontSize: "20px",
            marginLeft: "10px"
          }}>{messages('finance-4.key117')/*确定取消支付吗*/}?</span>
          <Form style={{ marginTop: '20px' }}>
            <Form.Item
              label={messages('finance-4.key319')/*理由*/}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14, offset: 1 }}
              style={{ marginBottom: '0px' }}
            >
              {getFieldDecorator('comment', {
                rules: [{ required: true, message: messages('finance-4.key320')/*请输入理由*/ }]
              })(
                <Input.TextArea rows={4} placeholder={messages('common.please.input')/*请输入*/} style={{ resize: 'none' }}/>
              )}
            </Form.Item>
          </Form>
        </div>
      </Modal>
    )
  }

}

export default CancelModal
